<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>xd商品管理系统</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./libs/jquery-3.4.1.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="./libs/utils.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="#">XD商品管理系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">其他页面</a></li>
          </ul>
          <ul id="un-login" class="nav navbar-nav navbar-right">
            <li><a href="./html/login.html">登录</a></li>
            <li><a href="./html/register.html">注册</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right hidden" id="is-login">
            <li>
              <a href=""
                >欢迎您，<b></b
                ><img
                  src=""
                  alt=""
                  style="width: 20px;height: 20px;border-radius: 50%; margin-left: 10px;"
              /></a>
            </li>
            <li id="un-login-btn"><a href="#">注销</a></li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
    <div class="container">
      <button
        class="btn btn-primary btn-add"
        data-toggle="modal"
        data-target="#addModal"
      >
        添加商品
      </button>
      <table
        class="table table-striped table-bordered table-hover table-condensed table-shop"
      >
        <thead>
          <tr>
            <th>编号</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="list-tbody">
          <!-- <tr>
          <td>1</td>
          <td><span>生发剂</span><input type="text"></td>
          <td><span>99</span><input type="text"></td>
          <td><span>2</span><input type="text"></td>
          <td>
            <button class="btn btn-xs btn-edit btn-info">编辑</button>
            <button class="btn btn-xs btn-del btn-danger">删除</button>
            <button class="btn btn-xs btn-ok btn-success">确定</button>
            <button class="btn btn-xs btn-cancel btn-warning">取消</button>
          </td>
        </tr> -->
        </tbody>
      </table>
    </div>
    <!-- Modal -->
    <div
      class="modal fade"
      id="addModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">添加商品</h4>
          </div>
          <div class="modal-body form-horizontal">
            <div class="form-group">
              <label for="inputName" class="col-sm-2 control-label"
                >商品名称</label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  id="inputName"
                  placeholder="请输入商品名称"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="inputPrice" class="col-sm-2 control-label"
                >商品价格</label
              >
              <div class="col-sm-10">
                <input
                  type="number"
                  class="form-control"
                  id="inputPrice"
                  placeholder="请输入商品价格"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="inputNum" class="col-sm-2 control-label"
                >商品数量</label
              >
              <div class="col-sm-10">
                <input
                  type="number"
                  class="form-control"
                  id="inputNum"
                  placeholder="请输入商品数量"
                />
              </div>
            </div>
            <p id="add-info" class="text-center"></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </button>
            <button type="button" class="btn btn-primary" id="btn-add">
              添加
            </button>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/select.js"></script>
    <script src="./js/add.js"></script>
    <script src="./js/eidt.js"></script>

    <script>
      const unLogin = $("#un-login");
      const isLogin = $("#is-login");
      //要带上token验证登录状态
      //但是cookie是http请求默认就会带上的，所以并不需要我们去操作
      $.get("/api/user/isLogin", resp => {
        if (resp.code === 200) {
          unLogin.addClass("hidden");
          isLogin.removeClass("hidden");
          isLogin.find("b").html(resp.body.username);
          isLogin.find("img").attr("src", resp.body.avatar);
        }
      });
      $("#un-login-btn").on("click", function() {
        if (confirm("确认要退出嘛？")) {
          $.get("/api/user/unLogin", resp => {
            unLogin.removeClass("hidden");
            isLogin.addClass("hidden");
          });
        }
      });
    </script>
  </body>
</html>
